<template>
    <van-nav-bar
    :title="title"
    :left-arrow="showLeftArrow"
    fixed
    @click-left="onBack"
    class="header-title-01 header-title-00"
    >
        <!-- 使用插槽 -->
        <template #left>
            <slot name="left"></slot>
        </template>
        <template #title>
            <slot name="title"></slot>
        </template>
        <template #right>
            <slot name="right"></slot>
        </template>
    </van-nav-bar>
</template>

<script>
export default {
    name: 'Navbar',
    props: {
        title: {
            type: String,
            default: ''
        },
        showBackButton: {
            type: Boolean,
            default: true
        },
        showLeftArrow: {
            type: Boolean,
            default: true // 默认显示左箭头
        },
        backCallback: {
            type: Function,
            default: null
        }
    },
    methods: {
        onBack() {
            if (this.showBackButton && this.showLeftArrow) {
                if (this.backCallback) {
                    this.backCallback();
                } else {
                    this.$router.go(-1);
                }
            }
        }
    }
};
</script>

<style scoped>

</style>
